<template>
  <div class="loan-apply-container">
    <!-- 步骤条 -->
    <el-steps :active="activeStep" finish-status="success" class="steps">
      <el-step title="客户信息" />
      <el-step title="贷款信息" />
      <el-step title="材料上传" />
      <el-step title="提交申请" />
    </el-steps>

    <!-- 表单内容 -->
    <el-card class="form-card">
      <!-- 客户信息步骤 -->
      <div v-show="activeStep === 0">
        <el-form
          ref="customerFormRef"
          :model="customerForm"
          :rules="customerRules"
          label-width="100px"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="客户姓名" prop="name">
                <el-input v-model="customerForm.name" placeholder="请输入客户姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="customerForm.phone" placeholder="请输入手机号码" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="证件号码" prop="idCard">
                <el-input v-model="customerForm.idCard" placeholder="请输入证件号码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="customerForm.gender">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="年龄" prop="age">
                <el-input-number v-model="customerForm.age" :min="18" :max="65" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="婚姻状况" prop="maritalStatus">
                <el-select v-model="customerForm.maritalStatus" placeholder="请选择婚姻状况">
                  <el-option label="未婚" :value="1" />
                  <el-option label="已婚" :value="2" />
                  <el-option label="离异" :value="3" />
                  <el-option label="丧偶" :value="4" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="居住地址" prop="address">
            <el-input v-model="customerForm.address" type="textarea" placeholder="请输入居住地址" />
          </el-form-item>
        </el-form>
      </div>

      <!-- 贷款信息步骤 -->
      <div v-show="activeStep === 1">
        <el-form
          ref="loanFormRef"
          :model="loanForm"
          :rules="loanRules"
          label-width="100px"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="贷款产品" prop="productId">
                <el-select v-model="loanForm.productId" placeholder="请选择贷款产品">
                  <el-option
                    v-for="item in productOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申请金额" prop="amount">
                <el-input-number 
                  v-model="loanForm.amount" 
                  :min="1000" 
                  :max="1000000" 
                  :step="1000"
                  :precision="2"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="期限(月)" prop="term">
                <el-select v-model="loanForm.term" placeholder="请选择贷款期限">
                  <el-option label="3个月" :value="3" />
                  <el-option label="6个月" :value="6" />
                  <el-option label="12个月" :value="12" />
                  <el-option label="24个月" :value="24" />
                  <el-option label="36个月" :value="36" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="还款方式" prop="repaymentMethod">
                <el-select v-model="loanForm.repaymentMethod" placeholder="请选择还款方式">
                  <el-option label="等额本息" :value="1" />
                  <el-option label="等额本金" :value="2" />
                  <el-option label="先息后本" :value="3" />
                  <el-option label="一次性还本付息" :value="4" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="贷款用途" prop="purpose">
            <el-input 
              v-model="loanForm.purpose" 
              type="textarea" 
              placeholder="请输入贷款用途" 
            />
          </el-form-item>
        </el-form>
      </div>

      <!-- 材料上传步骤 -->
      <div v-show="activeStep === 2">
        <el-form
          ref="materialFormRef"
          :model="materialForm"
          :rules="materialRules"
          label-width="100px"
        >
          <el-form-item label="身份证正面" prop="idCardFront">
            <el-upload
              class="upload-demo"
              action="#"
              :auto-upload="false"
              :limit="1"
              list-type="picture-card"
            >
              <template #default>
                <el-icon><Plus /></el-icon>
              </template>
              <template #file="{ file }">
                <img class="upload-image" :src="file.url" alt="身份证正面" />
              </template>
            </el-upload>
          </el-form-item>
          <el-form-item label="身份证反面" prop="idCardBack">
            <el-upload
              class="upload-demo"
              action="#"
              :auto-upload="false"
              :limit="1"
              list-type="picture-card"
            >
              <template #default>
                <el-icon><Plus /></el-icon>
              </template>
              <template #file="{ file }">
                <img class="upload-image" :src="file.url" alt="身份证反面" />
              </template>
            </el-upload>
          </el-form-item>
          <el-form-item label="收入证明" prop="incomeCertificate">
            <el-upload
              class="upload-demo"
              action="#"
              :auto-upload="false"
              :limit="3"
              list-type="picture-card"
            >
              <template #default>
                <el-icon><Plus /></el-icon>
              </template>
              <template #file="{ file }">
                <img class="upload-image" :src="file.url" alt="收入证明" />
              </template>
            </el-upload>
          </el-form-item>
          <el-form-item label="其他材料" prop="otherMaterials">
            <el-upload
              class="upload-demo"
              action="#"
              :auto-upload="false"
              :limit="5"
              list-type="picture-card"
            >
              <template #default>
                <el-icon><Plus /></el-icon>
              </template>
              <template #file="{ file }">
                <img class="upload-image" :src="file.url" alt="其他材料" />
              </template>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>

      <!-- 提交申请步骤 -->
      <div v-show="activeStep === 3">
        <el-result
          icon="success"
          title="申请信息确认"
          sub-title="请确认以下信息无误后提交申请"
        >
          <template #extra>
            <el-descriptions title="客户信息" :column="2" border>
              <el-descriptions-item label="客户姓名">{{ customerForm.name }}</el-descriptions-item>
              <el-descriptions-item label="手机号码">{{ customerForm.phone }}</el-descriptions-item>
              <el-descriptions-item label="证件号码">{{ customerForm.idCard }}</el-descriptions-item>
              <el-descriptions-item label="性别">{{ customerForm.gender === 1 ? '男' : '女' }}</el-descriptions-item>
              <el-descriptions-item label="年龄">{{ customerForm.age }}</el-descriptions-item>
              <el-descriptions-item label="婚姻状况">
                {{ 
                  customerForm.maritalStatus === 1 ? '未婚' :
                  customerForm.maritalStatus === 2 ? '已婚' :
                  customerForm.maritalStatus === 3 ? '离异' : '丧偶'
                }}
              </el-descriptions-item>
              <el-descriptions-item label="居住地址" :span="2">{{ customerForm.address }}</el-descriptions-item>
            </el-descriptions>

            <el-descriptions title="贷款信息" :column="2" border class="mt20">
              <el-descriptions-item label="贷款产品">
                {{ productOptions.find(item => item.id === loanForm.productId)?.name }}
              </el-descriptions-item>
              <el-descriptions-item label="申请金额">{{ loanForm.amount }}元</el-descriptions-item>
              <el-descriptions-item label="贷款期限">{{ loanForm.term }}个月</el-descriptions-item>
              <el-descriptions-item label="还款方式">
                {{ 
                  loanForm.repaymentMethod === 1 ? '等额本息' :
                  loanForm.repaymentMethod === 2 ? '等额本金' :
                  loanForm.repaymentMethod === 3 ? '先息后本' : '一次性还本付息'
                }}
              </el-descriptions-item>
              <el-descriptions-item label="贷款用途" :span="2">{{ loanForm.purpose }}</el-descriptions-item>
            </el-descriptions>
          </template>
        </el-result>
      </div>

      <!-- 步骤按钮 -->
      <div class="step-buttons">
        <el-button @click="handlePrev" v-if="activeStep > 0">上一步</el-button>
        <el-button 
          type="primary" 
          @click="handleNext"
          v-if="activeStep < 3"
        >下一步</el-button>
        <el-button 
          type="success" 
          @click="handleSubmit"
          v-if="activeStep === 3"
        >提交申请</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

// 当前步骤
const activeStep = ref(0)

// 客户信息表单
const customerFormRef = ref(null)
const customerForm = reactive({
  name: '',
  phone: '',
  idCard: '',
  gender: 1,
  age: 18,
  maritalStatus: '',
  address: ''
})

const customerRules = {
  name: [
    { required: true, message: '请输入客户姓名', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  idCard: [
    { required: true, message: '请输入证件号码', trigger: 'blur' },
    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号码', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' }
  ],
  maritalStatus: [
    { required: true, message: '请选择婚姻状况', trigger: 'change' }
  ],
  address: [
    { required: true, message: '请输入居住地址', trigger: 'blur' }
  ]
}

// 贷款信息表单
const loanFormRef = ref(null)
const loanForm = reactive({
  productId: '',
  amount: 10000,
  term: '',
  repaymentMethod: '',
  purpose: ''
})

const loanRules = {
  productId: [
    { required: true, message: '请选择贷款产品', trigger: 'change' }
  ],
  amount: [
    { required: true, message: '请输入申请金额', trigger: 'blur' }
  ],
  term: [
    { required: true, message: '请选择贷款期限', trigger: 'change' }
  ],
  repaymentMethod: [
    { required: true, message: '请选择还款方式', trigger: 'change' }
  ],
  purpose: [
    { required: true, message: '请输入贷款用途', trigger: 'blur' }
  ]
}

// 材料上传表单
const materialFormRef = ref(null)
const materialForm = reactive({
  idCardFront: '',
  idCardBack: '',
  incomeCertificate: [],
  otherMaterials: []
})

const materialRules = {
  idCardFront: [
    { required: true, message: '请上传身份证正面照片', trigger: 'change' }
  ],
  idCardBack: [
    { required: true, message: '请上传身份证反面照片', trigger: 'change' }
  ],
  incomeCertificate: [
    { required: true, message: '请上传收入证明', trigger: 'change' }
  ]
}

// 贷款产品选项
const productOptions = [
  { id: 1, name: '个人消费贷款' },
  { id: 2, name: '小微企业贷款' },
  { id: 3, name: '房屋抵押贷款' },
  { id: 4, name: '汽车抵押贷款' }
]

// 上一步
const handlePrev = () => {
  if (activeStep.value > 0) {
    activeStep.value--
  }
}

// 下一步
const handleNext = async () => {
  if (activeStep.value === 0) {
    try {
      await customerFormRef.value.validate()
      activeStep.value++
    } catch (error) {
      console.error('客户信息验证失败:', error)
    }
  } else if (activeStep.value === 1) {
    try {
      await loanFormRef.value.validate()
      activeStep.value++
    } catch (error) {
      console.error('贷款信息验证失败:', error)
    }
  } else if (activeStep.value === 2) {
    try {
      await materialFormRef.value.validate()
      activeStep.value++
    } catch (error) {
      console.error('材料上传验证失败:', error)
    }
  }
}

// 提交申请
const handleSubmit = async () => {
  try {
    // TODO: 调用接口提交申请
    ElMessage.success('申请提交成功')
  } catch (error) {
    console.error('提交失败:', error)
    ElMessage.error('提交失败，请重试')
  }
}
</script>

<style scoped>
.loan-apply-container {
  padding: 20px;
}

.steps {
  margin-bottom: 20px;
}

.form-card {
  margin-bottom: 20px;
}

.step-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.mt20 {
  margin-top: 20px;
}

.upload-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:deep(.el-upload--picture-card) {
  width: 200px;
  height: 150px;
}
</style>
